<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/index.css" />
    <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    <script
      src="js/axios.min.js"
      type="text/javascript"
      charset="utf-8"
    ></script>
    <style type="text/css">
      .conbody {
        background-image: url(img/e1e28da161ea68ca4d92e1a2831b32a.png) !important;
      }

      .item {
        margin: 20px auto;
        width: 1203px;
        height: 778px;
        background: url(img/topology/bg.png) no-repeat;
        background-size: 100% 100%;
        border: 1px solid #6be0f760;
        border-radius: 10px;
        position: relative;
      }
      .item > .item-one {
        position: absolute;
        cursor: pointer;
        transition: all 1.5s ease-in;
      }
      .item > .zhhcj {
        top: 155px;
        left: 121px;
        width: 976px;
        height: 164px;
      }
      .item > .zhhcj.active,
      .item > .zhhcj:hover {
        background: url(img/topology/zhhcj.png) no-repeat center;
      }

      .item > .ztxzx {
        top: 368px;
        left: 229px;
        width: 760px;
        height: 163px;
      }
      .item > .ztxzx.active,
      .item > .ztxzx:hover {
        background: url(img/topology/ztxzx.png) no-repeat center;
      }

      .item > .ptxdz {
        top: 565px;
        left: 177px;
        width: 868px;
        height: 175px;
      }
      .item > .ptxdz.active,
      .item > .ptxdz:hover {
        background: url(img/topology/ptxdz.png) no-repeat center;
      }
      .item > .row {
        position: absolute;
        bottom: 5px;
        left: 20px;
        font-size: 17px;
        line-height: 30px;
        letter-spacing: 1px;
      }
    </style>
  </head>
  <body class="conbody">
    <div id="product">
      <!-- <img src="img/e6699ad0ceed58e9a83b07321d7099a.png">
			<div id="">

			</div> -->
      <div class="header">
        <div class="left">苏州工业园区数字政府典型场景</div>
        <div class="right">
          <a href="javascript:void(0);" class="action">首页</a>
          <a href="Intellectualization.html">智慧化场景</a>
          <a href="integrated.html">整体性转型</a>
          <a href="base.html">平台型底座 </a>
        </div>
        <div class="backbtn">
          <a href="index.html"> 返回</a>
        </div>
      </div>

      <div class="item">
        <div
          class="item-one zhhcj"
          :class="{'active':id==0}"
          @click="btn(0)"
        ></div>
        <div
          class="item-one ztxzx"
          :class="{'active':id==1}"
          @click="btn(1)"
        ></div>
        <div
          class="item-one ptxdz"
          :class="{'active':id==2}"
          @click="btn(2)"
        ></div>
        <p class="row">{{list[id]}}</p>
      </div>

      <div class="footer">
        建设单位：苏州工业园区大数据管理局
        &nbsp;&nbsp;&nbsp;&nbsp;技术支持：新建元数字科技有限公司、天聚地合（苏州）数据股份有限公司
      </div>
    </div>

    <script src="js/util.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
      var product = new Vue({
        el: "#product",
        data: {
          id: null,
          list: [
            "“数据资源”需从全局角度考虑",
            "体现数据治理、数据共享、数据资产维度内容",
            "同时以专题形式呈现防疫、城市运行、经济大脑等数据资源",
          ],
        },
        created() {},
        mounted() {},
        methods: {
          btn(tabs) {
            this.id = tabs;
          },
        },
      });
    </script>
  </body>
</html>
